<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学校食谱</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/cookbook.css">
	<link rel="stylesheet" href="css/main.css">
	<style>
		.main {
			margin: 60px 0 1em 0;
		}

		.header {
			z-index: 100;
			position: fixed;
			float: inherit;
			top: 0;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="contain p-top" id="vue-root">
			<div class="header">
				<div class="header_title">学校食谱</div>
				<img src="image/return.png" alt="" class="return" onclick="history.back()">

				<template v-if="allow">
					<!-- 确认图标 -->
					<img class="header_admin" v-if="editing" @click="editOk" src="image/tickOk.png" alt="">
					<!-- 修改图标 -->
					<img src="image/admin.png" v-else alt="" class="header_admin" @click="editing=true">
				</template>


			</div>
			<div class="calendar-box">
				<div class="calendar">
					<!-- 前一天 -->
					<div class="calendar-left" @click="subtract1"></div>
					<!-- 日期显示 -->
					<div class="calendar-date">{{calendarDate}}</div>
					<!-- 后一天 -->
					<div class="calendar-right" @click="add1"></div>
				</div>
				<div class="week">
					<!-- 一星期范围的日期号 -->
					<span class="week-day" v-for="(item,index) in week" :key="'week'+index" @click="weekClick(item)">
						{{dayjs(item).format('DD')}}
					</span>
				</div>
			</div>
			<template v-for="(item,index) in list" :key="index">
				<!-- 食谱 -->
				<div class="cook-content box" v-if="item.pic||item.text||editing">
					<!-- 标题 -->
					<div>
						<!-- 标题文本 -->
						<input class="cook-content-title" :readonly="!editing" v-model="item.title"
							placeholder="请输入餐名" />
						<!-- 修改时显示 -->
					</div>
					<!-- 图片 -->
					<div class="cook-content-img1">
						<!-- 已有图片情况 -->
						<div v-if="item.pic" class="food-img">
							<!-- 图片显示 -->
							<img :src="getImg(item.pic)" @click="view(item.pic)" />
							<!-- 修改时显示 -->
							<img class="delImg" @click="delPic(index)" v-show="editing" src="image/remove.svg" alt="">
						</div>
						<!-- 没有图片情况 -->
						<img v-if="!item.pic&&editing" src="image/addImg.png" @click="addImg(item)" alt="">
					</div>
					<div>
						<textarea class="cook-content-text" v-show="editing" :readonly="!editing" v-model="item.text"
							cols="30" rows="5" placeholder="请添加菜式"></textarea>
						<pre class="cook-content-text" v-show="!editing">{{item.text}}</pre>
					</div>
					<!-- 删除本食谱内容 -->
					<span class="delCook" v-show="editing" @click="delCook(index)">清空</span>
				</div>
			</template>

		</div>
	</div>


	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/zh-cn.min.js"></script>

	<script src="/js/common.js"></script>

	<script src="/wechat/js/wx.js"></script>

	<script>

		dayjs.locale('zh-cn');
		var app = new Vue({
			el: '#vue-root',
			data: {
				date: new Date(),
				cookbook: null,
				calendarDate: "",
				week: [],
				weekIndex: 3,
				editing: false,
				iseditOk: false,
				list: [],
				chookMax: false,

				allow: isTeacher() && getTeacher().president
			},
			created: function () {
				this.getData(this.date);
				this.getCalendarDate(this.date);
				this.getWeek(this.date);

			},
			methods: {
				addImg: function (item) {
					wxChooseImg(1, 'cookbook', function (pic) {
						item.pic = pic;
					}.bind(this));
				},
				getCalendarDate: function (date) {
					// 显示日期
					this.calendarDate = dayjs(date).format('YYYY-MM-DD dddd')
				},
				editOk: function () {
					if (confirm("是否发布!")) {
						axios.post('/t/cookbook/' + this.date.getDay(), this.list).then(function (res) {
							alert('成功');
							this.getData(this.date);
						}.bind(this));
					}
					this.editing = false;
				},
				isedit: function (bol) {
					// 关闭发布弹出框
					this.iseditOk = bol;
				},
				getWeek: function (date) {
					// 获取一星期的日期
					this.week = [-3, -2, -1, 0, 1, 2, 3].map(function (it) {
						return dayjs(date).add(it, 'day').toDate();
					});
				},
				add1: function () {
					// 后一天
					this.date = dayjs(this.date).add(1, 'day').toDate();
					this.getCalendarDate(this.date);
					this.getWeek(this.date);

				},
				subtract1: function () {
					// 前一天
					this.date = dayjs(this.date).subtract(1, 'day').toDate();
					this.getCalendarDate(this.date);
					this.getWeek(this.date);

				},
				getData: function (date) {
					axios.get((isTeacher() ? '/t' : '/s') + '/cookbook', {
						params: {
							day: dayjs(date).get('day')
						}
					}).then(function (res) {
						this.cookbook = res.data;
						this.listChange();
					}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + this.cookbook.schoolId + '/cookbook/' + pic;
				},
				view: function (pic) {
					wxPreviewImg([this.getImg(pic)], 0);
				},
				viewFalse: function () {
					this.ispopImg = false
				},
				weekClick: function (date) {
					// 点击日期span改变日期
					this.date = date;
					this.getCalendarDate(this.date);
					this.getWeek(this.date);
				},
				delPic: function (i) {
					// 删除图片
					this.list[i].pic = null;
				},
				listChange: function () {
					var o = {
						breakfast: '早餐',
						breakfastPlus: '早加餐',
						lunch: '午餐',
						lunchPlus: '午加餐',
						dinner: '晚餐'
					};
					var ls = [];

					for (var key in o) {
						ls.push({
							title: this.cookbook[key + 'Name'] || o[key],
							text: this.cookbook[key],
							pic: this.cookbook[key + 'Pic'],
						});
					}

					this.list = ls
				},
				delCook: function (i) {
					// 删除菜谱
					this.list[i].pic = null;
					this.list[i].text = null;
				}
			},
			computed: {
				day: function () {
					return dayjs(this.date).format('dddd');
				},
				date1: function () {
					return dayjs(this.date).format('YYYY年MM月DD日');
				},
			},
			watch: {
				date: function (newValue, oldValue) {
					this.getData(newValue);
				}
			}
		});

		updateUnread('cookbook');
	</script>

</body>

</html>